<template>
  <div
    ref="LineChartDom"
    :class="className"
    :style="{ height: height, width: width }"
  />

  <!-- <div v-text="mxm"></div>
  <button @click="change">改变</button> -->
</template>

<script>
import { defineComponent, nextTick, ref, onMounted, watch } from 'vue'

import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default defineComponent({
  name: 'LineChart',
  props: {
    className: {
      type: String,
      default: 'chart',
    },
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '350px',
    },
    autoResize: {
      type: Boolean,
      default: true,
    },

    lineChartData: {
      type: Object,
      required: true,
    },
  },
  setup(props) {
    let chart = null
    const { initResize } = resize()

    const LineChartDom = ref() // RaddarChart 有另一种获取元素的方式

    const initChart = () => {
      chart = echarts.init(LineChartDom.value, 'macarons')
    }

    let setOptions = ({ expectedData, actualData } = {}) => {
      chart.setOption({
        xAxis: {
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          boundaryGap: false,
          axisTick: {
            show: false,
          },
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
          padding: [5, 10],
        },
        yAxis: {
          axisTick: {
            show: false,
          },
        },
        legend: {
          data: ['expected', 'actual'],
        },
        series: [
          {
            name: 'expected',
            itemStyle: {
              normal: {
                color: '#FF005A',
                lineStyle: {
                  color: '#FF005A',
                  width: 2,
                },
              },
            },
            smooth: true,
            type: 'line',
            data: expectedData,
            animationDuration: 2800,
            animationEasing: 'cubicInOut',
          },
          {
            name: 'actual',
            smooth: true,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#3888fa',
                lineStyle: {
                  color: '#3888fa',
                  width: 2,
                },
                areaStyle: {
                  color: '#f3f8ff',
                },
              },
            },
            data: actualData,
            animationDuration: 2800,
            animationEasing: 'quadraticOut',
          },
        ],
      })
    }

    onMounted(() => {
      nextTick(() => {
        initChart()
        setOptions(props.lineChartData)
        initResize(chart)
      })

      // window.onresize = function() {
      //   //自适应大小
      //   chart.resize()
      // }
    })

    // console.log('expectedData', reactive([...expectedData]))

    watch(
      () => props.lineChartData,
      (val) => {
        console.log('LineChart-watch--', val)
        setOptions(val)
      }
    )

    const mxm = ref('mxm')

    return {
      chart,
      LineChartDom,
      initChart,
    }
  },
})
</script>
